<template>
	<div class="subject_answer">
		<template v-if="type === '1'">
			<div class="button">
				<el-button size="small" type="primary" icon="el-icon-plus" @click="handleAddedOption(1)">添加选项</el-button>
				<p>点击按钮增加新的选项，并选择其中1个做为答案</p>
			</div>
			<el-radio-group class="subject_answer_option" v-model="answerString" v-if="answerOptions.length > 0">
				<div class="item" v-for="(item, index) in answerOptions" :key="index">
					<template v-if="index + 1 === answerOptions.length">
						<el-button class="close" type="text" icon="el-icon-circle-close" @click="handleDeleteOption(index)"></el-button>
					</template>
					<el-radio class="option" :label="item.tag" v-removeAriaHidden>选项{{ item.tag }}</el-radio>
					<sw-tiny-editor v-model="item.contents" type="question"></sw-tiny-editor>
				</div>
			</el-radio-group>
		</template>
		<template v-if="type === '2'">
			<div class="button">
				<el-button size="small" type="primary" icon="el-icon-plus" @click="handleAddedOption(2)">添加选项</el-button>
				<p>点击按钮增加新的选项，并选中对应选项做为答案</p>
			</div>
			<el-checkbox-group class="subject_answer_option" v-model="answerString" v-if="answerOptions.length > 0">
				<div class="item" v-for="(item, index) in answerOptions" :key="index">
					<template v-if="index + 1 === answerOptions.length">
						<el-button class="close" type="text" icon="el-icon-circle-close" @click="handleDeleteOption(index)"></el-button>
					</template>
					<el-checkbox class="option" :label="item.tag" v-removeAriaHidden>选项{{ item.tag }}</el-checkbox>
					<sw-tiny-editor v-model="item.contents" type="question"></sw-tiny-editor>
				</div>
			</el-checkbox-group>
		</template>
		<template v-if="type === '3'">
			<el-radio-group class="subject_answer_estimate" v-model="answerString">
				<el-radio :label="1" v-removeAriaHidden>正确</el-radio>
				<el-radio :label="2" v-removeAriaHidden>错误</el-radio>
			</el-radio-group>
		</template>
		<template v-if="type === '4'">
			<div class="button">
				<el-button size="small" type="primary" icon="el-icon-plus" @click="handleAddedBlank()">添加空格</el-button>
			</div>
			<div class="subject_answer_blanks" v-if="answerString.length > 0">
				<div class="item" v-for="(item, index) in answerString" :key="index">
					<el-button class="close" type="text" icon="el-icon-circle-close" @click="handleDeleteOption(index)"></el-button>
					<div class="option">空格{{ item.key }}</div>
					<sw-tiny-editor v-model="item.contents" type="question"></sw-tiny-editor>
				</div>
			</div>
		</template>
		<template v-if="type === '5'">
			<sw-tiny-editor v-model="answerString" type="question"></sw-tiny-editor>
		</template>
	</div>
</template>

<script>
export default {
	props: {
		type: { type: String, default: '' },
		value: { type: String, default: '' },
		options: { type: Array, default: () => [] }
	},
	data() {
		return {
			answer: this.value,
			answerString: null,
			answerOptions: []
		};
	},
	watch: {
		value(val) {
			this.answer = val;
		},
		answer(val) {
			this.$emit('input', val);
		},
		answerString(data) {
			console.log(data);
		}
	},
	watch: {
		type: {
			handler(val) {
				this.initializeAnswer();
			},
			immediate: true
		}
	},
	methods: {
		initializeAnswer() {
			this.answerString = null;
			if (this.type === '1') {
				if (this.options.length === 0) {
					this.answerOptions = [
						{ tag: 'A', contents: '' },
						{ tag: 'B', contents: '' },
						{ tag: 'C', contents: '' },
						{ tag: 'D', contents: '' }
					];
				} else {
					this.answerOptions = this.options;
				}
			} else if (this.type === '2') {
				if (this.options.length === 0) {
					this.answerOptions = [
						{ tag: 'A', contents: '' },
						{ tag: 'B', contents: '' },
						{ tag: 'C', contents: '' },
						{ tag: 'D', contents: '' }
					];
				} else {
					this.answerOptions = this.options;
				}
			}
			if (this.type === '2' || this.type === '4') {
				this.answerString = this.answer.isJSON() ? JSON.parse(this.answer) : [];
			} else {
				this.answerString = this.answer || '';
			}
		},

		//添加选项
		handleAddedOption(type) {
			if (type === 1 || type === 2) {
				let len = this.answerOptions.length;
				let tag = String.fromCharCode(65 + len);
				this.$set(this.answerOptions, len, { tag, contents: '' });
			} else if (type === 2) {
				console.log(type);
			}
		},

		//添加空格
		handleAddedBlank() {
			let len = 0;
			let key = 1;
			if (this.answerString.length > 0) {
				len = this.answerString.length;
				key = this.answerString[len - 1].key + 1;
			}
			this.$set(this.answerString, len, { key, contents: '' });
			this.$emit('addBlank', key);
		},

		//删除选项
		handleDeleteOption(index) {
			if (this.type === '4') {
				this.$emit('delBlank', index);
				this.answerString.splice(index, 1);
			} else {
				this.answerOptions.pop();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.subject_answer {
	.button {
		display: flex;
		align-items: center;
		height: 36px;
		p {
			margin-left: 10px;
			color: #f00;
		}
	}
}
.subject_answer_estimate {
	display: flex;
	align-items: center;
	height: 36px;
}
.subject_answer_option,
.subject_answer_blanks {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 16px;
	margin-top: 16px;
	.item {
		border-radius: 4px;
		border: solid 1px #ebeef5;
		background-color: #f2f6fc;
		&:has(.is-checked) {
			border-color: var(--primary-active);
			background-color: var(--primary-background-plain);
		}
	}
	.el-button.close {
		float: right;
		font-size: 20px;
		margin-right: 10px;
		padding: 6px 0;
	}
	.option {
		display: flex;
		padding: 10px;
		margin: 0;
		line-height: 1;
		font-weight: bold;
	}
	.sw_tinymce_editor {
		border-radius: 0;
		border-color: transparent;
		border-top-color: #ebeef5;
	}
	::v-deep .el-textarea__inner {
		padding: 8px 12px;
		border: none;
	}
}
</style>
